<template>
  <div>
    <div class="order-setting-item mobile-setting-radius">
      <!-- <orderKindConfig /> -->
      <income-kind-config v-if="hasRouteAuth('auth:system:income')" />
    </div>
    <!-- <div v-if="hasRouteAuth('auth:system:income')" class="order-setting-item" style="margin-top: 20px;">
    </div> -->
    <div class="order-setting-item full-screen mobile-setting-radius" style="margin-top:12px;padding-top:5px;padding-bottom:5px;">
      <fieldTree
        :field-items="normalItems"
        :default-expanded-keys="defaultExpandedKeys"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        draggable
        @node-drop="handleDrop"
        @getData="getData" />
      <MultistageTree
        :field-items="orderFormItems"
        :default-expanded-keys="defaultExpandedKeys"
        :request-api="orderFormSort"
        last-check-required
        status-required
        required-text="发布链接必填"
        @getData="getData"/>
      <MultistageTree
        :field-items="demandTypeItems"
        :default-expanded-keys="defaultExpandedKeys"
        :request-api="demandTypeSort"
        @getData="getData"/>
    </div>
  </div>
</template>

<script>
import orderKindConfig from '@/components/Configuration/orderKindConfig';
import IncomeKindConfig from '@/components/Configuration/incomeKindConfig';
import fieldTree from '@/components/SettingPage/fieldTree';
import MultistageTree from './components/multistageTree';
import { hasRouteAuth } from '@/utils/permission';
import { settingOrderSort, incomeTypeSort, orderFormSort, demandTypeSort } from '@/api/setting';
import ElMessage from '@/utils/message';

export default {
  components: { orderKindConfig, fieldTree, IncomeKindConfig, MultistageTree },
  props: {
    fieldItems: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      orderFormSort,
      demandTypeSort,
      isLoading: false
    };
  },
  computed: {
    normalItems() {
      return this.fieldItems.filter(data => {
        /* if (['下单平台', '收入类型'].includes(data.name)) {
          data.item.forEach(i => {
            i._sortType = data.name;
          });
        } */
        return ['下单平台', '收入类型'].includes(data.name);
      });
    },
    orderFormItems() {
      return this.fieldItems.filter(item => item.name === '下单形式');
    },
    demandTypeItems() {
      return this.fieldItems.filter(item => item.name === '品牌标签');
    }
  },
  methods: {
    hasRouteAuth,
    getData(respetPid) {
      this.$emit('getData', respetPid);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      const { name } = dropNode.parent.data;
      if (!['下单平台', '收入类型'].includes(name)) return;
      const orderPlatform = this.fieldItems.find(i => i.name === name);
      if (orderPlatform && orderPlatform.item) {
        const params = {
          sortArr: orderPlatform.item
        };
        let respetPid = [];
        if (dropNode.parent && dropNode.parent.data && dropNode.parent.data.pid) {
          respetPid = [dropNode.parent.data.pid];
        }
        this.isLoading = true;
        const requestApi = dropNode.parent.data.name === '下单平台' ? settingOrderSort : incomeTypeSort;
        requestApi(params).then((res) => {
          this.getData(respetPid);
          this.isLoading = false;
          if (res.code) {
            ElMessage.success('排序成功');
          } else {
            ElMessage.error(res.message);
          }
        }).catch(() => {
          this.getData(respetPid);
          this.isLoading = false;
        });
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      if (type === 'inner') return false;
      const parent = dropNode.parent || null;
      let canDrag = false;
      if (parent && parent instanceof Object && draggingNode.data._sortType === parent.data.name) {
        canDrag = true;
      }
      return dropNode.isLeaf && canDrag;
    },
    allowDrag(draggingNode) {
      const parent = draggingNode.parent || null;
      let canDrag = false;
      // 下单平台、收入类型的子节点拖拽
      if (parent && parent instanceof Object && ['下单平台', '收入类型'].includes(parent.data.name)) {
        canDrag = true;
      }
      return draggingNode.isLeaf && canDrag;
    }
  }
};
</script>

<style lang="scss" scoped>
.order-setting-item {
  background-color: #fff;
  padding: 16px 24px 24px;
}
.full-screen {
  min-height: calc(100vh - 222px);
}
</style>
